<template>
  <div>
    <!-- 角色输入框、查询与清空按钮 -->
    <el-form ref="form" label-width="80px" inline>
      <!-- 角色输入框 -->
      <el-form-item>
        <el-input
          placeholder="角色名称"
          v-model="searchObj.roleName"
        ></el-input>
      </el-form-item>
      <!-- 查询与清空按钮 -->
      <el-button type="primary" icon="el-icon-search" @click="searchRole"
        >查询</el-button
      >
      <el-button @click="roleClear">清空</el-button>
    </el-form>
    <!-- 添加与删除按钮 -->
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="showaddrole">添 加</el-button>
      <el-button
        type="danger"
        @click="deleteSelectedRole"
        :disabled="selectedRoles.length < 1"
        >批量删除</el-button
      >
    </div>
    <!-- table表格
     @selection-change="handleSelectionChange"
     -->
    <el-table
      :data="items"
      ref="multipleTable"
      tooltip-effect="dark"
      style="width: 60%; margin-bottom: 20px"
      border
      v-loading="roleLoading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index" align="center" width="80">
      </el-table-column>
      <!--用户名  -->
      <el-table-column label="角色名称" width="width">
        <template slot-scope="{ row }">
          <template v-if="row.edit">
            <el-input
              v-model="row.roleName"
              size="mini"
              style="width: 80%; padding-right: 10px"
              @blur="noupdaterole(row)"
            ></el-input>
            <el-button
              size="mini"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelrole(row)"
              >取消</el-button
            >
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <!-- 用户昵称 -->
      <!-- 操作 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="{ row }">
          <!-- 分配权限 -->
          <el-button
            title="分配权限"
            type="info"
            size="mini"
            icon="el-icon-info"
            @click="
              $router.push(
                `/acl/role/permissions/${row.id}?roleName=${row.roleName}`
              )
            "
          ></el-button>
          <!-- 修改角色 -->
          <el-button
            title="修改角色"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            style="margin-right: 10px"
            @click="changeSpanOrInput(row)"
            v-if="!row.check"
          ></el-button>
          <!-- 确认修改角色 -->
          <el-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            v-else
            style="margin-right: 10px"
            @click="updaterole(row)"
          ></el-button>
          <!--删除角色  -->
          <el-popconfirm
            :title="`确定${row.roleName}删除吗？`"
            @onConfirm="deleterole(row)"
          >
            <el-button
              title="删除角色"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              slot="reference"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 
          @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getSoleInfo"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 3,
      searchObj: {
        roleName: "",
      },
      total: 0,
      items: [],
      roleLoading: true,
      selectedRoles: [],
      roleName: "",
    };
  },
  mounted() {
    this.getSoleInfo();
  },
  methods: {
    //获取角色列表
    async getSoleInfo(page = 1) {
      this.page = page;
      const { limit, searchObj } = this;
      this.roleLoading = true;
      let result = await this.$API.role.default.getPageList(
        page,
        limit,
        searchObj
      );
      if (result.code == 20000) {
        const { total, items } = result.data;
        this.total = total;
        items.forEach((item) => {
          item.edit = false;
          return;
        });
        this.items = items;
        this.roleLoading = false;
      }
    },

    //每页展示数
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSoleInfo();
    },
    //搜索角色
    searchRole() {
      this.getSoleInfo();
    },
    //清空按钮
    roleClear() {
      this.searchObj.roleName = "";
      this.getSoleInfo();
    },
    //角色复选框发生改变  收集角色id
    handleSelectionChange(value) {
      this.selectedRoles = value.map((item) => item.id);
    },
    //删除某一个角色
    async deleterole(row) {
      let result = await this.$API.role.default.removeById(row.id);
      if (result.code == 20000) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getSoleInfo(this.items.length < 1 ? this.page - 1 : this.page);
      } else {
        this.$message.error(result.message);
      }
    },
    //批量删除
    deleteSelectedRole() {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let result = await this.$API.role.default.removeRoles(
          this.selectedRoles
        );
        if (result.code === 20000) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getSoleInfo(this.items.length < 1 ? this.page - 1 : this.page);
          this.selectedRoles = [];
        } else {
          this.$message.error(result.message);
        }
      });
    },
    //点击添加按钮 弹出框
    showaddrole() {
      this.$prompt("请输入新名称", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          if (value.trim() == "") {
          } else {
            let result = await this.$API.role.default.save({ roleName: value });
            if ((result.code = 20000)) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.getSoleInfo();
            } else {
              this.$message.error(result.message);
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "添加失败",
          });
        });
    },
    //点击修改角色  展示input框  排他思想
    changeSpanOrInput(row) {
      // this.items.every((item) => !item.edit)
      //   ? ""
      //   : this.$message.warning("取消修改角色");
      this.roleName = "";
      this.roleName = row.roleName;
      this.items.forEach((item) => {
        item.edit = false;
        item.check = false;
        return;
      });
      row.edit = true;
      row.check = true;
    },
    //输入框失去焦点
    noupdaterole(row) {
      // row.roleName = this.roleName;
    },
    //取消角色修改
    cancelrole(row) {
      if (row.roleName == this.roleName) {
        row.edit = false;
        row.check = false;
        this.$message.warning("取消修改角色");
      } else {
        row.roleName = this.roleName;
        row.edit = false;
        row.check = false;
        this.$message.warning("取消修改角色");
      }
    },
    //更新某个角色
    async updaterole(row) {
      let result = await this.$API.role.default.updateById({
        id: row.id,
        roleName: row.roleName,
      });
      if (result.code == 20000) {
        this.$message({
          type: "success",
          message: "修改角色成功",
        });
        this.getSoleInfo(this.page);
      } else {
        this.$message.error(result.message);
      }
    },
  },
};
</script>

<style>
</style>